<template>
	<uni-drawer ref="drawer" mode="right" :width="width" @change="handleChange">
		<view class="">
			<uni-nav-bar @clickLeft="close" left-icon="closeempty" background-color="#2979ff" :fixed="false" dark title="电子签名"></uni-nav-bar>
			<!-- 画板 -->
			<view class="draw_content">
				<view class="draw_action">
					<view class="top">
						<view class="tip">请在上方空白处书写您的签字</view>
					</view>
					<view class="center">
						<view class="color-state" v-for="(item, index) in colorArray" :key="index" @click="changeColor(item)">
							<uni-icons v-if="activeColor == item" custom-prefix="ufont" type="u-yuandui-fill" :color="item" size="30"></uni-icons>
							<uni-icons v-else custom-prefix="ufont" type="u-yuan-fill" :color="item" size="30"></uni-icons>
						</view>
						<!-- <view class="color-state">
							<uni-icons custom-prefix="ufont" type="u-yuan-fill" color="#f5222d" size="30"></uni-icons>
							<uni-icons custom-prefix="ufont" type="u-yuandui-fill" color="#f5222d" size="30"></uni-icons>
						</view>
						<view class="color-state">
							<uni-icons custom-prefix="ufont" type="u-yuan-fill" color="#2f54eb" size="30"></uni-icons>
							<uni-icons custom-prefix="ufont" type="u-yuandui-fill" color="#2f54eb" size="30"></uni-icons>
						</view> -->
					</view>
					<view class="bottom">
						<view class="btn">
							<button type="warn" @click="close" class="uwo-btn">取消</button>
							<button type="default" @click="reset" class="uwo-btn">重置</button>
							<button type="primary" :disabled="!isWrited" @click="done" class="uwo-btn">确定</button>
						</view>
					</view>
				</view>
				<view class="draw_main">
					<canvas
						class="canval-writing"
						disable-scroll="true"
						@touchstart="uploadScaleStart"
						@touchmove="uploadScaleMove"
						@touchend="uploadScaleEnd"
						canvas-id="canvalWriting"
					></canvas>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :is-mask-click="false" type="center">
			<view class="popup-content">
				<view class="loading">{{ loadingMessage }}</view>
			</view>
		</uni-popup>
	</uni-drawer>
</template>
<script setup>
import { ref } from 'vue';

const drawer = ref();
const popup = ref();
import Handwriting from './signature.js';
const windowInfo = uni.getWindowInfo();
const width = ref(windowInfo.windowWidth);
const activeColor = ref('#000000');
const colorArray = ref(['#000000', '#f5222d', '#2f54eb']);
const handwriting = ref();
const isWrited = ref(false);
const loadingMessage = ref('');
const props = ref({});
const show = (options) => {
	props.value = options;
	drawer.value.open();
	handwriting.value = new Handwriting({
		lineColor: activeColor.value,
		slideValue: 50, // 0, 25, 50, 75, 100
		canvasName: 'canvalWriting'
	});
};
defineExpose({ show });

const close = () => {
	drawer.value.close();
};
const handleChange = (e) => {
	isWrited.value = false;
};
const changeColor = (color) => {
	activeColor.value = color;
	handwriting.value.lineColor = color;
};
const uploadScaleStart = (event) => {
	handwriting.value.uploadScaleStart(event);
};
const uploadScaleMove = (event) => {
	isWrited.value = true;
	handwriting.value.uploadScaleMove(event);
};
const uploadScaleEnd = (event) => {
	handwriting.value.uploadScaleEnd(event);
};
const reset = () => {
	isWrited.value = false;
	handwriting.value.retDraw();
};
const showLoading = ({ title }) => {
	loadingMessage.value = title;
	popup.value.open();
};
const hideLoading = () => {
	popup.value.close();
};
const done = () => {
	showLoading({
		title: '签名生成中...'
	});
	handwriting.value
		.saveCanvas()
		.then((res) => {
			uploadFile(res);
		})
		.catch((err) => {
			uni.showToast({
				title: '生成签名时出错！',
				icon: 'none'
			});
		});
};
const emits = defineEmits(['ok']);
const uploadFile = (tempFilePath) => {
	loadingMessage.value = '正在上传...';

	let param = {};
	if (props.value.params) {
		if (typeof props.value.params === 'function') {
			param = props.value.params();
		} else if (typeof props.value.params === 'object') {
			param = props.value.params;
		}
	}
	let header = {};
	if (props.value.headers) {
		if (typeof props.value.headers === 'function') {
			header = props.value.headers();
		} else if (typeof props.value.headers === 'object') {
			header = props.value.headers;
		}
	}
	// 创建上传对象
	uni.uploadFile({
		url: props.value.uploadUrl,
		filePath: tempFilePath,
		formData: param,
		header: header,
		name: 'file',
		success: (res) => {
			if (res.statusCode != 200) {
				/* 失败 */
				uploadError(res);
			} else {
				let response = res.data;
				if (res.data instanceof String || typeof res.data === 'string') {
					response = JSON.parse(res.data);
				}
				if (response.code === 1) {
					loadingMessage.value = `上传成功`;
					emits('ok', response.data);
					hideLoading();
					close();
				} else {
					/* 失败 */
					uploadError(response);
				}
			}
		},
		fail: (e) => {
			uploadError(e);
		}
	});
};
const uploadError = (error) => {
	console.log(error);
	let message = '上传失败';
	if (error.statusCode === 404) {
		message = `上传地址有误！[${props.value.uploadUrl}]`;
	}
	loadingMessage.value = `${message}`;
};
</script>
<style scoped lang="scss">
@import '../css/iconfont.css';
.draw_content {
	display: flex;
	height: calc(100vh - 88rpx);
	.draw_action {
		width: 50px;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		.top {
			height: 260px;
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.tip {
				transform-origin: center center;
				transform: rotateZ(90deg);
				font-size: 18px;
				width: 250px;
				margin-top: 10px;
			}
		}
		.center {
			flex: 1;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.color-state {
				transform-origin: center center;
				transform: rotateZ(90deg);
				margin: 5px 0;
			}
		}
		.bottom {
			height: 280px;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 280px;
				transform-origin: center center;
				transform: rotateZ(90deg);
				.uwo-btn {
					width: 80px;
					position: relative;
					border: 0upx;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					padding: 0 30upx;
					font-size: 28upx;
					height: 64upx;
					line-height: 1;
					text-align: center;
					text-decoration: none;
					overflow: visible;
					margin-left: initial;
					transform: translate(0upx, 0upx);
				}
			}
		}
	}
	.draw_main {
		border: 1px solid #eee;
		flex: 1;
		background-color: #ffffff;
		height: 100%;
		.canval-writing {
			width: 100%;
			height: 100%;
		}
	}
}

.popup-content {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 15px;
	.loading {
		background-color: #fff;
		transform-origin: center center;
		transform: rotateZ(90deg);
	}
}
</style>
